import * as React from "react";

//import { SearchForm } from "@/components/search-form";
//import { VersionSwitcher } from "@/components/version-switcher";
import { ForwardRefExoticComponent, RefAttributes } from "react";
import { IconProps } from "@radix-ui/react-icons/dist/types"; // Import IconProps from Radix

// Define the type for Radix UI icons
type RadixIcon = ForwardRefExoticComponent<
  IconProps & RefAttributes<SVGSVGElement>
>;
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar";

export interface ISidebarMenuItem {
  title: string;
  url: string;
  icon?: RadixIcon;
}
export interface ISidebarSubmenu {
  title: string;
  url: string;
  icon?: RadixIcon;
  items: ISidebarMenuItem[];
}
export interface ISidebarMenu {
  versions: string[];
  navMain: ISidebarSubmenu[];
}
export type AppSidebarProps = {
  menus: ISidebarMenu;
};

export function AppSidebar({
  menus,
  ...props
}: React.ComponentProps<typeof Sidebar> & AppSidebarProps) {
  return (
    <Sidebar className="top-[--header-height]" variant="inset" {...props}>
      <SidebarHeader>
        {/* <VersionSwitcher
          versions={data.versions}
          defaultVersion={data.versions[0]}
          />
          <SearchForm />*/}
      </SidebarHeader>
      <SidebarContent>
        {/* We create a SidebarGroup for each parent. */}
        {menus.navMain.map((item) => (
          <SidebarGroup key={item.title}>
            <div className="flex flex-row items-center">
              {item.icon ? <item.icon /> : null}
              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
            </div>
            <SidebarGroupContent>
              <SidebarMenu>
                {item.items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton asChild>
                      <a href={item.url}>
                        {item.icon ? <item.icon /> : null}
                        <span>{item.title}</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  );
}
